<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网 - 淘！我喜欢</title>
    <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
  <meta name="aplus-xplug" content="NONE">
  <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="fonts/iconfont.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <div class="nv_top">
    <div class="wid">
        <div class="top_nav">
        <div class="lf">
            <span class="region"><a href="#">中国大陆</a></span><span class="v">v</span>
            <span class="login_top"><a href="#">亲，请登录</a></span>
            <span class="register_top"><a href="#">免费注册</a></span>
            <span class="mobile"><a href="#">手机逛淘宝</a></span>  <!--左侧先用行内元素 -->
        </div>
        <div class="rf">
        <ul>  
            <li><a href="#">联系客服<i class="iconfont">&#xe8a4;</i></a></li>
            <li><a href="#">千牛卖家中心<i class="iconfont">&#xe8a4;</i></a></li>
            <li><a href="#"><i class="iconfont" style="font-size: 12px;">&#xe600;
            </i>&nbsp收藏夹<i class="iconfont">&#xe8a4;</i>
            </a></li>
            <li><a href="#">商品分类</a></li>
            <li>|</li>
            <li><a href="#"><i class="iconfont">&#xe80f;</i>购物车</a></li>
            <li><a href="#">我的淘宝<i class="iconfont">&#xe633;</i></a></li>
          
        </ul>
            </div>
        </div>
    </div>
</div>
    <div class="header wid">
        <div class="logo">
            <div class="clearfix">
                <a href="index.html" title="淘宝仿"></a>
            </div>
        </div>
        <div class="top_search">
            <div class="search_bd">宝贝</div>
            <input type="search" name="" id="" placeholder="&nbsp&nbsp&nbsp&nbsp鞋子"><span style="position: absolute;left: 77px; line-height: 36px; font-size: large;">
                <i class="iconfont">&#xe8aa;</i></span>
                                <!-- 仿照淘宝搜索框里面的放大镜，用一个行内块和相对定位来搞定 但是问题是文字和字体图标的距离，会重合 -->
            <span class="search_button"><button>搜索</button></span>      
        </div>
        <div class="QRcode">
            <!-- 二维码 -->
            下载淘宝
            <img src="">
        </div>
        <div class="search_ft">
            <!-- 这里设置搜索原淘宝网搜索框下面的推荐商品 -->
            <ul>
                <li><a href="#">新款连衣裙</a></li>          
                <li><a href="#">四件套</a></li>
                <li><a href="#" style="color: #ff5000;">潮流T恤</a></li>
                <li><a href="#">时尚女鞋</a></li>
                <li><a href="#">短裤</a></li>
                <li><a href="#">半身裙</a></li>
                <li><a href="#">男士外套</a></li>
                <li><a href="#">墙纸</a></li>
                <li><a href="#">行车记录仪</a></li>
                <li><a href="#">新款男鞋</a></li>
                <li><a href="#">耳机</a></li>
                <li><a href="#">时尚女包</a></li>
                <li><a href="#">沙发</a></li>
            </ul>
        </div>
    </div>
    <div class="main wid">
        <div class="clearfix">      <!-- 清除浮动，上面的标题都是设置为所浮动，防止高度塌陷 -->
        <div class="navi_main_top">
            <!-- 设置主页上方标题导航导航 -->
            <h2>主题市场</h2>
        </div>
        <div class="navi_main_bd">
            <ul>
                <li><a href="#"><a href="#">天猫</a></a></li>
                <li><a href="#">聚划算</a></li> 
                <li class="last"><a href="#">天猫超市</a></li>       


            </ul>
        </div>
        <div class="navi_main_hd">
            <ul>
                <li><a href="#">|</a></li>
                <li><a href="#">司法拍卖</a></li>
                <li><a href="#">飞猪旅行</a></li>
                <li><a href="#">天天特卖</a></li>
                <li><a href="#">|</a></li>
            </ul>
        </div>
        <div class="navi_main_last">  
                <li><a href="#">造点新货</a></li>
                <li><a href="#">苏宁易购</a></li>
                <li><a href="#">淘宝心选</a></li>
                <li><a href="#">智能生活</a></li>
            </div>
        </div>
        <div class="clearfix">
            <div class="screen">
                <div class="main_box_left">
                <div class="service_bd">
                    <ul>
                        <li><i class="iconfont">&#xe627;</i>
                        <a href="#">女装</a><span class="service_slash">/</span><a href="#">内衣</a><span class="service_slash">/</span><a href="#">家居</a>
                    </li>
                       <li>
                           <i class="iconfont">&#xe625;</i>
                           <a href="#">女鞋</a><span class="service_slash">/</span><a href="#">男鞋</a><span class="service_slash">/</span><a href="#">箱包</a>
                    </li>
                        <li>
                            <i class="iconfont">&#xe61c;</i>
                            <a href="#">母婴</a><span class="service_slash">/</span><a href="#">童装</a><span class="service_slash">/</span><a href="#">玩具</a>
                        </li>
                        <li>
                            <i class="iconfont">&#xe623;</i>
                            <a href="#">男装</a><span class="service_slash">/</span><a href="#">运动户外</a>
                        </li>
                        <li>
                            <i class="iconfont">&#xe61f;</i>
                            <a href="#">美妆</a><span class="service_slash">/</span><a href="#">彩妆</a><span class="service_slash">/</span><a href="#">个护</a>
                        </li>
                        <li>
                            <i class="iconfont">&#xe620;</i>
                            <a href="#">手机</a><span class="service_slash">/</span><a href="#">数码</a><span class="service_slash">/</span><a href="#">企业</a>
                        </li>
                        <li>
                            <i class="iconfont">&#xe62d;</i>
                            <a href="#">大家电</a><span class="service_slash">/</span><a href="#">生活电器</a>
                        </li>
                        <li>
                            <i class="iconfont">&#xe61a;</i>
                            <a href="#">零食</a><span class="service_slash">/</span><a href="#">生鲜</a><span class="service_slash">/</span><a href="#">茶酒</a>
                        </li>
                        <li> 
                            <i class="iconfont">&#xe639;</i>
                            <a href="#">厨具</a><span class="service_slash">/</span><a href="#">收纳</a><span class="service_slash">/</span><a href="#">清洁</a>
                        </li>
                        <li> 
                            <i class="iconfont">&#xe63e;</i>
                            <a href="#">家纺</a><span class="service_slash">/</span><a href="#">家饰</a><span class="service_slash">/</span><a href="#">鲜花</a>
                        </li>
                       <li>
                           <i class="iconfont">&#xe62c;</i>
                           <a href="#"> 图书音像</a><span class="service_slash">/</span><a href="#">文具</a></li>
                        <li>
                            <i class="iconfont">&#xe86d;</i>
                            <a href="#">医药保健</a><span class="service_slash">/</span><a href="#">进口</a>
                        </li>
                        <li>
                            <i class="iconfont">&#xe7fe;</i>
                            <a href="#">汽车</a><span class="service_slash">/</span><a href="#">二手车</a><span class="service_slash">/</span><a href="#">用品</a>
                        </li>
                        <li>
                            <i class="iconfont">&#xe835;</i>
                            <a href="#">房产</a><span class="service_slash">/</span><a href="#">装修家具</a><span class="service_slash">/</span><a href="#">建材</a>
                        </li>
                        <li>
                            <i class="iconfont">&#xe81d;</i>
                            <a href="#">手表</a><span class="service_slash">/</span><a href="#">眼镜</a><span class="service_slash">/</span><a href="#">珠宝饰品</a>
                        </li>
                    </ul>
                </div>
                <div class="main_box_banner">
                    <img src="images/banner1.jpg">
                </div>
                <div class="inner">
                    <span class="tianmao_bd"></span>
                    <span class="tianmao_text">理想生活上天猫</span>
                </div>
                <div class="discount_box">
                    <div class="discount_box_loaded">
                    <a href="#"><img src="images/discount/discount1.jpg"></a>
                    <a href="#"><img src="images/discount/discount2.jpg"></a>
                </div>
                </div>
            </div>
            <div class="main_box_right">
                <!-- 主页右侧个人信息模块 -->
                <div class="profile_box">
                    <!-- 设置头像 -->
                    <div class="profile"><a href="#"></a></div>
                    <div class="text1">
                    <a href="#">hi!你好</a>
                </div>
                </div>
                <div class="button_fuction">
                    <!-- 头像下方的功能按钮模块 -->
                    <div class="button_logout">
                        <a href="#">登录</a>
                        <a href="#">注册</a>
                        <a href="#">开店</a>
                    </div>
                </div>
                <div class="tip_modle">
                    <!-- 功能按钮下方的外部链接广告 -->
                    <a href="#"></a>
                    <img src="https://gw.alicdn.com/imgextra/i3/O1CN01Aq7brs1KNeyyozBnm_!!6000000001152-2-tps-356-141.png">
                </div>
                <div class="notice">
                    <!-- 首页的公告热点 -->
                    <div class="notice_top">
                        <span class="notice_title">公告</span ><span class="notice_desc">新鲜事儿都在这里～</span>
                    </div>
                    <div class="notice_content">
                        <div class="notice-tip">热点</div>
                        <p>这里就不写公告了</p>
                    </div>
                    <div class="notice_content">
                        <div class="notice_content">
                            <div class="notice-tip">热点</div>
                            <p>这里就不加a标签了，太多了。</p>
                    </div>
                </div>
                    <div class="notice_content">
                        <div class="notice_content">
                            <div class="notice-tip">热点</div>
                            <p>这里就不写公告了</p>
                    </div>
                </div>
            </div>
            <div class="mytao">
                <!-- 这里按照官网起名字，我的淘宝 -->
                <div class="mytao_content">
                    <a href="#"><i class="iconfont" style="width: 60px;font-size: 30px; margin-left: 13px;">&#xe884;</i></a>
                    <p>收藏的宝贝</p>
                </div>
                <div class="mytao_content">
                    <a href="#"><i class="iconfont" style="width: 60px;font-size: 30px; margin-left: 13px;">&#xe7a4;</i><p>买过的店铺</p></a>
                </div>
                <div class="mytao_content">
                    <a href="#"><i class="iconfont" style="width: 60px;font-size: 30px; margin-left: 13px;">&#xe867;</i><p>收藏的店铺</p></a>
                </div>
                <div class="mytao_content_last" >
                    <a href="#"><i class="iconfont" style="width: 60px;font-size: 30px; margin-left: 13px;">&#xe7e1;</i><p>我的足迹</p></a>
                </div>
            </div>
        </div> 
    </div>
    <div class="main_goods wid">
        <div class="goods_inner">
            <div class="goods_hd">
                <span class="total_title">有好货</span>
                <img class="mlogo" src="https://img.alicdn.com/imgextra/i1/O1CN01EjcAPM25IsjiwGyYs_!!6000000007504-2-tps-65-20.png">
            </div>
            <div class="goods_bd">
                <a href="#">
                    <div class="img_wapper">
                        <img class="all_goods"src="https://img.alicdn.com/tfscom/TB2NUe4tVXXXXc5XpXXXXXXXXXX_!!0-dgshop.jpg_180x180xzq90.jpg_.webp">
                        <div class="mask"></div>
                    </div>
                    <div class="info">
                        <h4>同车同伴头戴腰枕</h4>
                    </div>
                </a>
                <a href="#">
                    <div class="img_wapper">
                        <img class="all_goods"src="https://img.alicdn.com/tfscom/TB2NUe4tVXXXXc5XpXXXXXXXXXX_!!0-dgshop.jpg_180x180xzq90.jpg_.webp">
                        <div class="mask"></div>
                    </div>
                    <div class="info">
                        <h4>同车同伴头戴腰枕</h4>
                    </div>
                </a>
                <a href="#">
                    <div class="img_wapper">
                        <img class="all_goods"src="https://img.alicdn.com/tfscom/TB2NUe4tVXXXXc5XpXXXXXXXXXX_!!0-dgshop.jpg_180x180xzq90.jpg_.webp">
                        <div class="mask"></div>
                    </div>
                    <div class="info">
                        <h4>同车同伴头戴腰枕</h4>
                    </div>
                </a>
                <a href="#">
                    <div class="img_wapper">
                        <img class="all_goods"src="https://img.alicdn.com/tfscom/TB2NUe4tVXXXXc5XpXXXXXXXXXX_!!0-dgshop.jpg_180x180xzq90.jpg_.webp">
                        <div class="mask"></div>
                    </div>
                    <div class="info">
                        <h4>同车同伴头戴腰枕</h4>
                    </div>
                </a>
                <a href="#">
                    <div class="img_wapper">
                        <img class="all_goods"src="https://img.alicdn.com/tfscom/TB2NUe4tVXXXXc5XpXXXXXXXXXX_!!0-dgshop.jpg_180x180xzq90.jpg_.webp">
                        <div class="mask"></div>
                    </div>
                    <div class="info">
                        <h4>同车同伴头戴腰枕</h4>
                    </div>
                </a>
            </div>
        </div>
        <div class="main_hot wid">
            <div class="hot_hd">
            <h3>
                <span class="total_title">猜你喜欢</span>
            </h3>
            <img class="mlogo"src="https://img.alicdn.com/imgextra/i3/O1CN01x0HokP1RvHJCaEcuY_!!6000000002173-2-tps-65-20.png">
        </div>
        <div class="hot_bd">
        <div class="item">
            <a href="#">
                <div class="img_wapper">
                    <img src="https://img.alicdn.com/bao/uploaded/i2/64404545/O1CN01t4uzq41jReoyG0ApT_!!0-item_pic.jpg_200x200q90.jpg_.webp">
                </div>
                <h4>特百惠 双层蒸霸 升级版 多层叠高家用蒸笼 蒸屉 蒸格 新款 正品</h4>
            </a>
            <p class="info">
                <span class="marks"></span>
                <span class="price">
                    <em>¥</em>99.7
                </span>
            </p>
        </div>
        <div class="item">
            <a href="#">
                <div class="img_wapper">
                    <img src="https://img.alicdn.com/bao/uploaded/i2/64404545/O1CN01t4uzq41jReoyG0ApT_!!0-item_pic.jpg_200x200q90.jpg_.webp">
                </div>
                <h4>特百惠 双层蒸霸 升级版 多层叠高家用蒸笼 蒸屉 蒸格 新款 正品</h4>
            </a>
            <p class="info">
                <span class="marks"></span>
                <span class="price">
                    <em>¥</em>99.7
                </span>
            </p>
        </div>
        <div class="item">
            <a href="#">
                <div class="img_wapper">
                    <img src="https://img.alicdn.com/bao/uploaded/i2/64404545/O1CN01t4uzq41jReoyG0ApT_!!0-item_pic.jpg_200x200q90.jpg_.webp">
                </div>
                <h4>特百惠 双层蒸霸 升级版 多层叠高家用蒸笼 蒸屉 蒸格 新款 正品</h4>
            </a>
            <p class="info">
                <span class="marks"></span>
                <span class="price">
                    <em>¥</em>99.7
                </span>
            </p>
        </div>
        <div class="item">
            <a href="#">
                <div class="img_wapper">
                    <img src="https://img.alicdn.com/bao/uploaded/i2/64404545/O1CN01t4uzq41jReoyG0ApT_!!0-item_pic.jpg_200x200q90.jpg_.webp">
                </div>
                <h4>特百惠 双层蒸霸 升级版 多层叠高家用蒸笼 蒸屉 蒸格 新款 正品</h4>
            </a>
            <p class="info">
                <span class="marks"></span>
                <span class="price">
                    <em>¥</em>99.7
                </span>
            </p>
        </div>
        <div class="item">
            <a href="#">
                <div class="img_wapper">
                    <img src="https://img.alicdn.com/bao/uploaded/i2/64404545/O1CN01t4uzq41jReoyG0ApT_!!0-item_pic.jpg_200x200q90.jpg_.webp">
                </div>
                <h4>特百惠 双层蒸霸 升级版 多层叠高家用蒸笼 蒸屉 蒸格 新款 正品</h4>
            </a>
            <p class="info">
                <span class="marks"></span>
                <span class="price">
                    <em>¥</em>99.7
                </span>
            </p>
        </div>
        <div class="item">
            <a href="#">
                <div class="img_wapper">
                    <img src="https://img.alicdn.com/bao/uploaded/i2/64404545/O1CN01t4uzq41jReoyG0ApT_!!0-item_pic.jpg_200x200q90.jpg_.webp">
                </div>
                <h4>特百惠 双层蒸霸 升级版 多层叠高家用蒸笼 蒸屉 蒸格 新款 正品</h4>
            </a>
            <p class="info">
                <span class="marks"></span>
                <span class="price">
                    <em>¥</em>99.7
                </span>
            </p>
        </div>
        <div class="item">
            <a href="#">
                <div class="img_wapper">
                    <img src="https://img.alicdn.com/bao/uploaded/i2/64404545/O1CN01t4uzq41jReoyG0ApT_!!0-item_pic.jpg_200x200q90.jpg_.webp">
                </div>
                <h4>特百惠 双层蒸霸 升级版 多层叠高家用蒸笼 蒸屉 蒸格 新款 正品</h4>
            </a>
            <p class="info">
                <span class="marks"></span>
                <span class="price">
                    <em>¥</em>99.7
                </span>
            </p>
        </div>
        <div class="item">
            <a href="#">
                <div class="img_wapper">
                    <img src="https://img.alicdn.com/bao/uploaded/i2/64404545/O1CN01t4uzq41jReoyG0ApT_!!0-item_pic.jpg_200x200q90.jpg_.webp">
                </div>
                <h4>特百惠 双层蒸霸 升级版 多层叠高家用蒸笼 蒸屉 蒸格 新款 正品</h4>
            </a>
            <p class="info">
                <span class="marks"></span>
                <span class="price">
                    <em>¥</em>99.7
                </span>
            </p>
        </div>
        <div class="item">
            <a href="#">
                <div class="img_wapper">
                    <img src="https://img.alicdn.com/bao/uploaded/i2/64404545/O1CN01t4uzq41jReoyG0ApT_!!0-item_pic.jpg_200x200q90.jpg_.webp">
                </div>
                <h4>特百惠 双层蒸霸 升级版 多层叠高家用蒸笼 蒸屉 蒸格 新款 正品</h4>
            </a>
            <p class="info">
                <span class="marks"></span>
                <span class="price">
                    <em>¥</em>99.7
                </span>
            </p>
        </div>
        <div class="item">
            <a href="#">
                <div class="img_wapper">
                    <img src="https://img.alicdn.com/bao/uploaded/i2/64404545/O1CN01t4uzq41jReoyG0ApT_!!0-item_pic.jpg_200x200q90.jpg_.webp">
                </div>
                <h4>特百惠 双层蒸霸 升级版 多层叠高家用蒸笼 蒸屉 蒸格 新款 正品</h4>
            </a>
            <p class="info">
                <span class="marks"></span>
                <span class="price">
                    <em>¥</em>99.7
                </span>
            </p>
        </div>
        <div class="item">
            <a href="#">
                <div class="img_wapper">
                    <img src="https://img.alicdn.com/bao/uploaded/i2/64404545/O1CN01t4uzq41jReoyG0ApT_!!0-item_pic.jpg_200x200q90.jpg_.webp">
                </div>
                <h4>特百惠 双层蒸霸 升级版 多层叠高家用蒸笼 蒸屉 蒸格 新款 正品</h4>
            </a>
            <p class="info">
                <span class="marks"></span>
                <span class="price">
                    <em>¥</em>99.7
                </span>
            </p>
        </div>
        <div class="item">
            <a href="#">
                <div class="img_wapper">
                    <img src="https://img.alicdn.com/bao/uploaded/i2/64404545/O1CN01t4uzq41jReoyG0ApT_!!0-item_pic.jpg_200x200q90.jpg_.webp">
                </div>
                <h4>特百惠 双层蒸霸 升级版 多层叠高家用蒸笼 蒸屉 蒸格 新款 正品</h4>
            </a>
            <p class="info">
                <span class="marks"></span>
                <span class="price">
                    <em>¥</em>99.7
                </span>
            </p>
        </div>
        <div class="item">
            <a href="#">
                <div class="img_wapper">
                    <img src="https://img.alicdn.com/bao/uploaded/i2/64404545/O1CN01t4uzq41jReoyG0ApT_!!0-item_pic.jpg_200x200q90.jpg_.webp">
                </div>
                <h4>特百惠 双层蒸霸 升级版 多层叠高家用蒸笼 蒸屉 蒸格 新款 正品</h4>
            </a>
            <p class="info">
                <span class="marks"></span>
                <span class="price">
                    <em>¥</em>99.7
                </span>
            </p>
        </div>
        <div class="item">
            <a href="#">
                <div class="img_wapper">
                    <img src="https://img.alicdn.com/bao/uploaded/i2/64404545/O1CN01t4uzq41jReoyG0ApT_!!0-item_pic.jpg_200x200q90.jpg_.webp">
                </div>
                <h4>特百惠 双层蒸霸 升级版 多层叠高家用蒸笼 蒸屉 蒸格 新款 正品</h4>
            </a>
            <p class="info">
                <span class="marks"></span>
                <span class="price">
                    <em>¥</em>99.7
                </span>
            </p>
        </div>
        <div class="item">
            <a href="#">
                <div class="img_wapper">
                    <img src="https://img.alicdn.com/bao/uploaded/i2/64404545/O1CN01t4uzq41jReoyG0ApT_!!0-item_pic.jpg_200x200q90.jpg_.webp">
                </div>
                <h4>特百惠 双层蒸霸 升级版 多层叠高家用蒸笼 蒸屉 蒸格 新款 正品</h4>
            </a>
            <p class="info">
                <span class="marks"></span>
                <span class="price">
                    <em>¥</em>99.7
                </span>
            </p>
        </div>

    </div>
    </div>
    </div>
</div>
    </div>
    <div class="fix_window">
        <!-- 右侧的粘性定位的帮助 -->
        <div class="fixedtool">
            <div class="x1">
                <div class="text">
            <tr>品质</tr>
            <tr>好货</tr> 
            </div>
        </div>
            <div class="x2">
                <div class="text">
                    <p>猜你</p>
                    <p>喜欢</p>
                    </div>
            </div>
            <div class="x3">
                <div class="text">
                    <p>反馈</p>
                    </div>
            </div>
            <div class="x4">
                <div class="text">
                    <p>暴恐</p>
                    </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <!-- 设置页面的总页脚 -->
        <div class="tb_footer_hd">
            <p>
            <span>阿里巴巴集团</span>
            <b>|</b>
            <span>淘宝网</span>
            <b>|</b>
            <span>天猫</span>
            <b>|</b>
            <span>聚划算</span>
            <b>|</b>
            <span>全球速卖通</span>
            <b>|</b>
            <span>阿里巴巴国际交易市场</span>
            <b>|</b>
            <span>1688</span>
            <b>|</b>
            <span>阿里妈妈</span>
            <b>|</b>
            <span>飞猪</span>
            <b>|</b>
            <span>淘小铺</span>
            <b>|</b>
            <span>阿里云计算</span>
            <b>|</b>
            <span>AliOS</span>
            <b>|</b>
            <span>阿里通信</span>
            <b>|</b>
            <span>一淘</span>
            <b>|</b>
            <span>万网</span>
            <b>|</b>
            <span>高德</span>
            <b>|</b>
            <span>uc</span>
            <b>|</b>
            <span>写不动了</span>
            <b>|</b>
            <span>我不写了</span>
            <b>|</b>
            <span>李鑫宇</span>
            <b>|</b>
            <span>李鑫宇</span>
        </div>
    </p>
        <div class="tb_footer_bd">
            页脚太多了
        </div>
        <div class="tb_footer_ft">不写了</div>
    </div>
</body>
</html>